<template>
  <div class="toggle-switch" :class="{ active: modelValue, disabled }">
    <input 
      type="checkbox" 
      :checked="modelValue"
      :disabled="disabled"
      @change="handleChange"
      class="toggle-input"
    />
    <div class="toggle-slider">
      <div class="toggle-thumb"></div>
    </div>
  </div>
</template>

<script setup lang="ts">
/**
 * 切换开关组件
 * 提供美观的开关切换界面
 * @component
 * @example
 * <ToggleSwitch v-model="enabled" />
 */

interface Props {
  modelValue: boolean
  disabled?: boolean
}

const props = withDefaults(defineProps<Props>(), {
  disabled: false
})

const emit = defineEmits<{
  'update:modelValue': [value: boolean]
}>()

/**
 * 处理开关状态变化
 * @param event - 变化事件
 */
const handleChange = (event: Event): void => {
  const target = event.target as HTMLInputElement
  emit('update:modelValue', target.checked)
}
</script>

<style lang="scss" scoped>
.toggle-switch {
  position: relative;
  width: 50px;
  height: 26px;
  cursor: pointer;
  user-select: none;

  &.disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  .toggle-input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
  }

  .toggle-slider {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    border-radius: 26px;
    transition: $transition-normal;

    .toggle-thumb {
      position: absolute;
      content: "";
      height: 20px;
      width: 20px;
      left: 3px;
      bottom: 3px;
      background-color: white;
      border-radius: 50%;
      transition: $transition-normal;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    }
  }

  &.active {
    .toggle-slider {
      background-color: $primary-color;

      .toggle-thumb {
        transform: translateX(24px);
      }
    }
  }

  &:hover:not(.disabled) {
    .toggle-slider {
      .toggle-thumb {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
      }
    }
  }
}
</style>